<template>
  <div class="newshow">
    <div class="headers">
      <el-steps :active="active" align-center finish-status="success">
        <el-step title="商品基本信息" />
        <el-step title="添加库存信息" />
        <el-step title="添加移动端详情" />
      </el-steps>
    </div>
    <div class="boydes">
      <div v-if="active == 1" class="one">
        <div style="font-size: 18px">
          基本信息
          <el-divider />
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-row>
              <el-col :span="8">
                <el-form-item label="商品名称">
                  <el-input
                    v-model="formInline.product.name"
                    placeholder="商品名称"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商品编码">
                  <el-input
                    v-model="formInline.product.productSn"
                    placeholder="商品编码"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商品分类">
                  <el-select
                    v-model="formInline.product.productCategoryName"
                    placeholder="商品分类"
                  >
                    <el-option
                      v-for="item in classifyList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="商品品牌">
                  <el-select
                    v-model="formInline.product.brandId"
                    placeholder="商品品牌"
                  >
                    <el-option
                      v-for="item in listName"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-col :span="24">
              <el-form-item label="商品描述">
                <el-input
                  v-model="formInline.product.description"
                  style="width: 600px"
                  type="textarea"
                />
              </el-form-item>
            </el-col>
          </el-form>
        </div>
        <div style="font-size: 18px">
          商品属性
          <el-divider />
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-row>
              <el-col :span="8">
                <el-form-item label="商品原价">
                  <el-input-number
                    v-model="formInline.product.originalPrice"
                    :min="0"
                    label="商品原价"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="促销类型">
                  <el-input
                    v-model="formInline.product.user"
                    :disabled="true"
                    placeholder="促销类型"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="活动价格">
                  <el-input
                    v-model="formInline.product.user"
                    :disabled="true"
                    placeholder="活动价格"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item>
                  <!-- <el-input-number v-model="formInline.num" :min="0" label="重量（kg）" /> -->
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item>
                  <!-- <el-input-number v-model="formInline.num" :min="0" label="重量（kg）" /> -->
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="重量（kg）">
                  <el-input-number
                    v-model="formInline.product.weight"
                    :min="1"

                    label="描述文字"
                  /> </el-form-item></el-col>
            </el-row>
            <el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="审核状态">
                    <el-switch
                      v-model="shhe"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      @change="shheee($event)"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否上架">
                    <el-switch
                      v-model="shfo"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      @change="shifou($event)"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8" />
              </el-row>
            </el-row>
            <el-row>
              <el-col :span="20">
                <el-form-item label="缩略图">
                  <el-upload
                    action="/lejuAdmin/material/uploadFileOss"
                    list-type="picture-card"
                    :headers="tokens"
                    :on-success="handleAvatarSuccess"
                  >
                    <i class="el-icon-plus" />
                  </el-upload>
                  <!-- <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog> -->
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div style="font-size: 18px">
          其它信息
          <el-divider />
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-row>
              <el-col :span="8">
                <el-form-item label="推荐状态">
                  <el-switch
                    v-model="tuji"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="tuijianshangpin($event)"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="新品状态">
                  <el-switch
                    v-model="xnpin"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="xinpinshangpin($event)"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="预告商品">
                  <el-switch
                    v-model="yugao"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="yugaoshangpin($event)"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-row>
              <el-col :span="8">
                <el-form-item label="搜索关键词">
                  <el-input
                    v-model="formInline.product.keywords"
                    placeholder="搜索关键词"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="库存预警">
                  <el-input-number
                    v-model="formInline.product.lowStock"
                    :min="20"
                    label="库存预警"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商品排序">
                  <el-input-number
                    v-model="formInline.product.sort"
                    :min="0"
                    label="商品排序"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-row :gutter="24">
              <el-col :span="12" :offset="8">
                <el-form-item label="产品服务">
                  <!-- <el-checkbox-group v-model="service">
                    <el-checkbox label="无忧退货" name="carefree" @change="wuyou($event)" />
                    <el-checkbox label="急速退款" name="celerity" @change="jisu($event)" />
                    <el-checkbox label="免费包邮" name="charge" @change="mianfei($event)" />
                  </el-checkbox-group> -->
                  <el-checkbox
                    v-for="item in service"
                    :key="item.id"
                    v-model="item.ischec"
                    :label="item.text"
                    @change="fuwu"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div v-else-if="active == 2" class="two">
        <div style="font-size: 18px">商品sku信息</div>
        <el-divider />
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-row>
            <el-col :span="8">
              <el-form-item label="主标题">
                <el-input
                  v-model="formInline.user"
                  style="width: 200px"
                  placeholder="主标题"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="副标题">
                <el-input
                  v-model="formInline.user"
                  style="width: 500px"
                  placeholder="副标题"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="18">
              <el-form-item label="相册图片">
                <el-upload
                  action="/lejuAdmin/material/uploadFileOss"
                  list-type="picture-card"
                  :headers="tokens"
                  :on-preview="SKUPictureCardPreview"
                  :on-remove="SKURemove"
                  :on-success="SKUaaSuccess"
                >
                  <i class="el-icon-plus" />
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5张</div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="sku设置">
            <div class="skuShezhi">
              <div>
                <el-input v-model="iptColor" placeholder="请输入颜色" />
                <el-button>创建颜色选项</el-button>
              </div>
              <div>
                <el-input v-model="iptDaXiao" placeholder="请输入大小" />
                <el-button>创建大小选项</el-button>
              </div>
              <div class="skuRight">
                <el-button type="primary">生成sku列表</el-button>
                <el-button type="primary">新增sku</el-button>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div v-else-if="active == 3" class="thrue">
        <div style="font-size: 18px">商品详细信息描述</div>
        <el-divider />
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-row>
            <el-col :span="22">
              <el-form-item label="商品详细信息" />
              <tinymce v-model="formInline.product.detailDesc" />
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="btn">
      <el-button
        v-if="active === 1 ? '' : 'xian'"
        class="inte"
        @click="uear"
      >上一步</el-button>
      <el-button
        v-if="active == 1"
        class="inters"
        @click="next()"
      >下一步，填写库存信息</el-button>
      <el-button
        v-else-if="active == 2"
        class="inters"
        @click="next()"
      >下一步，填写移动端详情</el-button>
      <el-button
        v-else-if="active == 3"
        class="inters"
        @click="next()"
      >保存信息</el-button>
    </div>
  </div>
</template>

<script>
import tinymce from '@/components/Tinymce'
import { findAllBrand } from '@/api/product/judge/index.js'
import { getAllCategory } from '@/api/product/classify/index.js'
import { getToken } from '@/utils/myAuth'
import { addProductAndSkus } from '@/api/product/newShow/index.js'
export default {
  components: {
    tinymce
  },
  data() {
    return {
      a: true,
      // 服务
      service: [
        {
          id: 1,
          text: '无忧退货',
          ischec: false
        },
        {
          id: 2,
          text: '快速退款',
          ischec: false
        },
        {
          id: 3,
          text: '免费包邮',
          ischec: false
        }
      ],
      // 推荐状态
      tuji: false,
      // 新品状态
      xnpin: false,
      // 预告状态
      yugao: false,
      // 上架状态
      shfo: false,
      // 审核状态
      shhe: false,
      // 上一步按钮是否显示
      xian: true,
      // 步骤条初始值
      active: 1,
      // 要上传的对象数据
      iptColor: '',
      iptDaXiao: '',
      formInline: {
        pmsSkuStockList: [],
        product: {
          albumPics: '', // 商品详情页画册图片，连产品图片限制为5张，以英文逗号分割 ,
          brandId: '', // 品牌id
          brandName: '', // 品牌名称 需要根据id查询
          description: '', // 商品基本信息描述信息
          detailDesc: '', // 商品详情页描述信息
          detailHtml: '', // 预留 商品明细,一般是后台富文本录入的.但是一个后台需要支持pc和移动端. 展示是不同的.这个是PC端
          detailMobileHtml: '', // 商品明细,移动端内容
          detailTitle: '', // 明细页面标题
          feightTemplateId: '', // 预留 邮寄模板
          giftGrowth: '', // 预留 成长值
          giftPoint: '', // 预留 成长积分
          id: '', // 商品id,新增不需要,修改需要
          keywords: '', // 关键词逗号隔开,比如:  地中海,欧式,桌子
          lowStock: '', // 预留 低库存预警
          name: '', // 商品名称
          newStatus: '', // 新品状态:0->不是新品；1->新品 . 如果是新品,会默认在移动端首页显示
          note: '', // 备注信息,比如: 小舅子渠道,回扣很多.
          originalPrice: '0', // 原价
          pic: '', // 封面图片
          previewStatus: '', // 是否为预告商品：0->不是；1->是 ,
          price: '',
          productAttributeCategoryId: '', // 预留  商品属性
          productCategoryId: '', // 商品分类id
          productCategoryName: '', // 商品分类名称
          productSn: '', // 商品编码
          promotionPerLimit: '', // 预留 活动商品限购/人
          promotionPrice: '', // 预留 活动价格
          deleteStatus: '', // 标记删除,后台使用,前台无效
          promotionEndTime: '', // 预留 活动结束时间
          promotionStartTime: '',
          promotionType: '', // 预留 促销类型：0->没有促销使用原价;1->使用促销价；2->使用会员价；3->使用阶梯价格；4->使用满减价格；5->限时购 ,
          modifyTime: '', // 更新时间
          publishStatus: '', // 上架状态：0->下架；1->上架
          recommendStatus: '', //  推荐状态；0->不推荐；1->推荐 ,
          sale: '', // 销量
          serviceIds: '', //  以逗号分割的产品服务：1->无忧退货；2->快速退款；3->免费包邮 ,
          sort: '', // 排序倒排, 999 越大越靠前
          stock: '', // 库存
          subTitle: '', // 次级标题
          unit: '0', // 单位:  台/辆/斤/个...
          usePointLimit: '', // 预留 购买使用积分限制
          verifyStatus: '', // 审核状态：0->未审核；1->审核通过 ,
          weight: '', // 重量,单位kg
          createTime: '' // 创建时间,后台生成
        }
      },
      // 品牌名称列表数据
      listName: [],
      // 商品分类数据
      classifyList: []
    }
  },
  computed: {
    // 上传图片没有携带本地存储的登录信息，需要手动添加上去
    tokens() {
      return {
        token: getToken()
      }
    }
  },
  created() {
    // 获取品牌列表
    findAllBrand().then((res) => {
      console.log(res)
      this.listName = res.data.items
    })
    // 获取商品分类
    getAllCategory().then((res) => {
      console.log(res)
      //  1） map方法
      // const all = res.data.items.map(ele => {
      //   if (ele.category.name === '乐居') {
      //     return ele.children
      //   }
      // })
      // console.log(all)
      //  2） some方法
      res.data.items.some((ele) => {
        if (ele.category.name === '乐居') {
          var all = ele.children
          // console.log(all)
          this.classifyList = all
          return true
        }
      })
      // 3）filter过滤方法
      // res.data.items.filter(ele => {
      //   if (ele.category.name === '乐居') {
      //     var all = ele.children
      //     console.log(all)
      //     return
      //   }
      // })
      //  4) foreach()方法
      // res.data.items.forEach(ele => {
      //   if (ele.category.name === '乐居') {
      //     var all = ele.children
      //     console.log(all)
      //     return
      //   }
      // })
    })
  },
  methods: {
    shheee(e) {
      // 审核状态
      const shuzi = e ? '1' : '0'
      this.formInline.product.verifyStatus = shuzi
    },
    shifou(e) {
      // 上架状态
      const shuzi = e ? '1' : '0'
      this.formInline.product.publishStatus = shuzi
    },
    // // 图片上传成功后的钩子
    handleAvatarSuccess(response, file, fileList) {
      // console.log(response, file, fileList)
      // 上传成功就把图片地址 赋值 给接口需要的数据
      this.formInline.product.pic = response.data.fileUrl
      console.log(this.formInline.product.pic)
    },
    tuijianshangpin(e) {
      // 推荐状态
      const shuzi = e ? '1' : '0'
      this.formInline.product.recommendStatus = shuzi
    },
    xinpinshangpin(e) {
      // 新品状态
      const shuzi = e ? '1' : '0'
      this.formInline.product.newStatus = shuzi
    },
    yugaoshangpin(e) {
      // 预告状态
      const shuzi = e ? '1' : '0'
      this.formInline.product.previewStatus = shuzi
    },
    fuwu() {
      // 产品服务
      this.formInline.product.serviceIds = this.service
        .filter((ele) => ele.ischec)
        .map((ele) => ele.id)
        .join(',')
    },
    // SKU相册上点击已上传的图片列表
    SKUPictureCardPreview(file) {
      console.log(file)
    },
    // SKU相册上点击已上传文件列表移除文件时的钩子
    SKURemove(file, fileList) {
      console.log(file, fileList)
    },
    // SKU相册上点击已上传文件上传成功时的钩子
    SKUaaSuccess(response, file, fileList) {
      console.log(response, file, fileList)
    },
    // 下一步
    next() {
      if (this.active >= 3) {
        return
      }
      this.active++
    },
    // 上一步
    uear() {
      if (this.active <= 1) {
        return
      }
      this.active--
    }
  }
}
</script>

<style lang="scss" scoped>
.newshow {
  .headers {
    width: 100%;
    padding-top: 50px;
    height: 150px;
    background-color: #fff;
  }
  .boydes {
    height: 100%;
    margin: 30px 30px 0;
    background-color: #fff;
    .one {
      padding: 30px 30px 0;

      .avatar-uploader .el-upload {
        border: 2px dashed #0c0c0c;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }
      .avatar-uploader-icon {
        border: 2px solid #0c0c0c;
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
      }
      .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
    }
    .two {
      width: 100%;
      padding: 30px 30px 0;
      .skuShezhi{
        display: flex;
        justify-content: space-around;
        >div{
          display: flex;
          justify-content: space-between;
          margin-right: 20px;
        }
        .skuRight{
          display: flex;
          justify-content: space-around;
        }
      }

    }
    .thrue {
      padding: 30px 30px 0;
    }
  }
  .btn {
    margin: 30px;
    background-color: #fff;
    text-align: center;
    .inte {
      background-color: #d7da50;
      color: #000;
    }
    .inters {
      background-color: #2e8ec5;
      color: #000;
    }
  }
}
</style>
